<template>
  <div class="main">
    <el-form :model="from" label-position="top" :rules="rules" ref="fromRef">
      <div class="back_img"></div>
      <div class="login">
        <div class="lgoinImg">
          <img src="../assets/img/cmsmushroom.jpg" />
        </div>
        <div class="login_title"></div>
        <div class="login_input">
          <el-form-item prop="userName">
          <el-input
            prefix-icon="UserFilled"
            placeholder="请输入账号"
            v-model="from.userName"
          ></el-input>
          </el-form-item>
        </div>
        <div class="login_input">
          <el-form-item prop="passWord">
          <el-input 
            prefix-icon="Lock"
            placeholder="请输入密码"
            show-password
            v-model="from.passWord"
          ></el-input>
        </el-form-item>
        </div>
        <div class="login_input">
          <el-form-item prop="userRole">
          <el-input 
            prefix-icon="Place"
            placeholder="请输入你的角色"
            v-model="from.userRole"
          ></el-input>
        </el-form-item>
        </div>

        <!-- <el-select
          v-model="value"
          placeholder="请选择用户类型"
          class="login_input1"
        >
          <el-option
            v-for="item in types"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          >
          </el-option>
        </el-select> -->
        <div class="login_button" >
          <p @click="checkLogin(from)">登录</p>
          <p @click="dakaizhuce()">注册</p>
        </div>
      </div>
    </el-form>
  </div>
<!-- 注册窗口👇 -->
    <el-dialog v-model="zhucechuangkou" title="注册成新用户" width="30%">
    <el-form label-width="120px">
      <el-form-item label="用户名_wyl">
        <el-input v-model="zhuceInfo.userName" />
      </el-form-item>
       <el-form-item label="电话号码">
        <el-input v-model="zhuceInfo.telephone" />
      </el-form-item>
       <!-- <el-form-item label="密码">
        <el-input v-model="zhuceInfo.password" />
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="zhuceInfo.realName" />
      </el-form-item>
      <el-form-item label="用户角色">
        <el-input v-model="zhuceInfo.userRole" /> 我想只能是用户
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="zhucechuangkou = false">不w注册yl了</el-button>
        <el-button type="primary" @click="register()" v-model="zhucechuangkou"
          >确认注册</el-button>
      </span>
    </template>
  </el-dialog>

</template>
<script>
import { get } from '@/utils/request'
import { ElMessage } from 'element-plus'
import { ref } from '@vue/reactivity'
// do not use same name with ref

export default {
  name: 'LoginRegister',
  data() {
    return {

      zhucechuangkou:false,//注册窗口
      zhuceInfo:{
        userName: '',
        telephone: '',
        userRole: 'user',
      },//注册变量

      from: {
        //roleID: '',
        userRole: '',
        userName: '',
        passWord: '',
      },
      types: [],
      value: '',
      login: [],
      //login:{}
    }
  },
  setup() {
    const rules = ref({//空时提醒
      userName: [
        {
          required: true,
          message: '请填写账户',
          trigger: 'blur'
        },
      ],
      passWord:[
        {
          required: true,
          message: '请填写密码',
          trigger: 'blur'
        }
      ],
      userRole:[
        {
          required: true,
          message: '你的角色不能为空',
          trigger: 'blur'
        }
      ]
    })
    
    return {rules}
  },
  mounted() {

  },
  methods: {
    
 checkLogin() {
  //this.from
  console.log("checkLogin开始运行了")
  console.log(this.from)
      get('/checkLogin', {
        userName: this.from.userName,
        password: this.from.passWord,
        userRole: this.from.userRole,
        //userRole: this.value,
      }).then((res) => {//res是网页请求后网页返回值
        console.log(res.data) //res.data是用户对象
        console.log(this.login.code)
        this.login = res.data
        if (this.login.userId != null) {
          this.$router.push({
            name: 'wanquanbutong_622'
          }),
            ElMessage({
              message: '登录成功！',
              type: 'success'
            })
        } else {
          ElMessage.error('登录失败，请输入正确的密码，或用户名，或权限！')
        }
      })
    },
    old_checkLogin(form) {
      
      //if(from.userName == 'wyl' && from.passWord == '123')
      //console.log(form.userName)
      //console.log(form.passWord)
      this.$router.push({
            name: 'wanquanbutong_622'//根据路由名称查找开始跳转
          })
      //else
      //    alert('错误')

    },
    dakaizhuce(form) {
      this.zhucechuangkou=!this.zhucechuangkou
    },
    register(){//注册方法
    console.log(this.zhuceInfo)
      this.zhucechuangkou =! this.zhucechuangkou
      get('/registerUser',{
        userName:this.zhuceInfo.userName,
        telephone:this.zhuceInfo.telephone,
        //userRole:user,
        }).then((res) => {
        console.log(res.data)
        //this.login = res.data
        //console.log(this.login.code)
        if (res.data == -1) {
          ElMessage.error('注册失败哦用户名或电话号已被使用')
        } else {
          ElMessage({
              message: '注册成功！',
              type: 'success'
            })
        }
        //window.location.reload()
      })
      
    }
  }
}
</script>

<style scoped>
.back_img {
  background: url('../assets/img/login622.jpg');
  background-size: 100% 100%;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.login {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgb(43, 104, 57);
  opacity: 0.95;
  /* background: #65768557; */
  padding: 30px;
  width: 18%;
  border: 1px solid rgb(29, 84, 43);
  border-radius: 20px;
}
.lgoinImg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lgoinImg img {
  width: 110px;
  height: 110px;
  background: #eceeed;
  border-radius: 50%;
  border: 10px solid #fff;
}

.login_title {
  text-align: center;
  padding-bottom: 20px;
}
.login_input {
  margin-top: 15px;
}
.login_input:nth-child(2) {
  margin-bottom: 20px;
}
.login_input:nth-child(3) {
  margin-top: 20px;
}
.login_button {
  margin-top: 20px;
  display: flex;
}
.login_button p {
  color: #fff;
  font-size: 15px;
  display: block;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  border: 1px solid #ddd;
}
.login_button p:nth-child(1) {
  background: rgb(29, 170, 50);
  margin-right: 10px;
  
}
.login_button p:nth-child(2) {
  background: rgb(29, 140, 50);
  margin-left: 10px;
  text-decoration: underline;
}
</style>
